/* 
http://www.kateglo.com
Project Initiator:
Arthur Purnama
CSS / XHTML:
Moch. Zamroni
*/

/*
 *  Table Of Sections
 *
 *  1. Reset
 *  2. Basic Elements
 *  3. Generic Classes
 *  4. Basic Layout
 *  5. Header
 *  6. Content
 *  7. Sidebar
 *  8. Footer
 *  9. Navigation
 * 10. Forms
 * 11. Modules
 *
 */

/* 1. Reset
-------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, menu, header {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	outline: none;
}

/* 2. Basic Elements
-------------------------------------*/
@font-face {
	font-family: 'DroidSerifRegular';
	src: url('/font/DroidSerif-Regular-webfont.eot');
	src: url('/font/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('/font/DroidSerif-Regular-webfont.woff') format('woff'), url('/font/DroidSerif-Regular-webfont.ttf') format('truetype'), url('/font/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'OpenSansRegular';
	src: url('/font/OpenSans-Regular-webfont.eot');
	src: url('/font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('/font/OpenSans-Regular-webfont.woff') format('woff'), url('/font/OpenSans-Regular-webfont.ttf') format('truetype'), url('/font/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	background: #fff;
	color: #333;
	font: normal 14px/160% Droid Serif, Georgia, Times New Roman, serif;
}

/* 3. Generic Classes
-------------------------------------*/
a {
	text-decoration: none;
	color: #156BC0;
}

a:hover {
	text-decoration: underline;
}

.clear {
	clear: both;
}

hr {
	height: 1px;
	background-color: #e5e5e5;
	border: 0px;
	margin: 10px 0 20px 0;
}

/*  4. Basic Layout
-------------------------------------*/
.w940 {
	margin: 20px;
	min-width: 940px;
}

content .content {
	min-width: 760px;
	padding-left: 180px;
}

aside {
	width: 160px;
	float: left;
	/*display: block;*/
	font-size: 12px;
}

/*  5. Header
-------------------------------------*/
header {
	display: block;
	margin: 30px 0 20px 0;
	width: 940px;
}

header h2 {
	background: url(/images/img_sprite.png) 0 -108px no-repeat;
	display: block;
	height: 48px;
	width: 150px;
	text-align: left;
	text-indent: -5000px;
	float: left;
}

header .telusur {
	float: right;
	width: 760px;
	margin: 7px 0 0 0;
}

header .telusur input[type=text] {
	width: 650px;
	margin: 0px;
}

header .pright {
	float: right;
}

header .pleft {
	float: left;
	text-align: left;
}

/*  6. Content
-------------------------------------*/
.padanan {
	width: 750px;
	border-collapse: collapse;
}

.padanan td {
	width: 375px;
	padding: 5px;
	border: 1px solid black;
}

.padanan tr {
	background-color: #EFEFEF;
}

.padanan tr:nth-child(even) {
	background-color: #DEDEDE;
}

.padanan em sup {
	font-style: normal;
}

content h1 {
	font: normal 40px Droid Serif, Georgia, Times New Roman, serif;
}

content ol {
	margin: 0 0 25px 20px;
}

content dt {
	font: 14px OpenSansRegular, Arial, Helvetica, sans-serif;
}

dt.class {
	font: 12px OpenSansRegular, Arial, Helvetica, sans-serif;
	text-transform: lowercase;
}

content dt,
content ol li {
	margin: 0 0 10px 0;
}

content h1,
content nav,
content dl {
	margin: 0 0 25px 0;
}

content dl dt sup{
	vertical-align: super;
}

content p {
	padding: 0 0 0 20px;
}

content h3 {
	font: bold 18px OpenSansRegular, Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #e5e5e5;
}

content .more {
	float: right;
	font: normal 12px OpenSansRegular, Arial, Helvetica, sans-serif;
	color: #333;
	line-height: 30px;
}

content dd ul li {
	list-style: none;
	display: inline;
}

content dd ul li:after {
	content: '.';
	padding: 0 5px;
}

content dd ul li.end:after {
	content: '';
	padding: 0 5px;
}

content select {
	border: 1px solid #e5e5e5;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	font: normal 14px OpenSansRegular, Arial, Helvetica, sans-serif;
	padding: 2px;
	margin: 0 10px;
}

nav {
	font: normal 12px OpenSansRegular, Arial, Helvetica, sans-serif;
}

nav a {
	padding: 5px 15px;
	border: 1px solid #e5e5e5;
	margin: 0 5px 0 0;
}

nav a:hover {
	color: #333;
	text-decoration: none;
	background-color: #f5f5f5;
}

nav a.on {
	color: #000;
	text-decoration: none;
	background-color: #E5E5E5;
}

nav a.on:hover {
	color: #333;
	text-decoration: none;
	background-color: #f5f5f5;
}

/*  7. Sidebar
-------------------------------------*/
aside h3 {
	font: bold 16px OpenSansRegular, Arial, Helvetica, sans-serif;
	padding: 0 0 5px 0;
}

aside ul {
	list-style: none;
	text-indent: -15px;
	margin: 0 0 20px 20px;
}

aside .telusuri {
	margin: 0 0 20px 20px;
	list-style: square outside none;
	text-indent: 0px;
}

/* 8. Footer
-------------------------------------*/
footer {
	color: #999;
	display: block;
	font: normal 12px OpenSansRegular, Arial, Helvetica, sans-serif;
	text-align: center;
	height: 150px;
}

footer a {
	color: #156bc0;
}

footer a:hover {
	color: #333;
}

footer ul,
footer p {
	padding: 25px 0 0 0;
}

footer li {
	list-style: none;
	display: inline;
}

footer li:before {
	content: '.';
	padding: 0 5px;
}

footer .no:before {
	content: none;
	padding: 0px;
}

footer .abc {
	font-size: 16px;
}

footer p {
	font-size: 11px;
}

/* 9. Navigation
-------------------------------------*/
menu {
	background-color: #333;
	color: #fff;
	display: block;
	font: normal 14px/40px OpenSansRegular, Arial, Helvetica, sans-serif;
	height: 40px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

menu a {
	color: #999;
}

menu a:hover,
menu .on {
	color: #fff;
	text-shadow: 1px 1px #333;
	text-decoration: none;
}

menu li {
	list-style: none;
	display: inline;
	padding: 0 20px 0 0;
}

.topright {
	float: right;
}

.topleft {
	float: left;
	padding: 0 0 0 20px;
}

.cumb {
	background-color: #f5f5f5;
	padding: 5px 10px;
	font: normal 13px OpenSansRegular, Arial, Helvetica, sans-serif;
	margin: 0 0 30px 0;
	width: 730px;
}

content .cumb p {
	padding: 0px;
}

.cumb .close {
	float: right;
	font: normal 20px/17px OpenSansRegular, Arial, Helvetica, sans-serif;
}

.cumb a:hover {
	text-decoration: none;
	color: #000;
}

.cumb .close:after {
	content: none;
}

.cumb a:after {
	content: ">";
	padding: 0 5px;
}

.pagination {
	margin: 0 0 30px 0;
	line-height: 35px;
	font: normal 11px OpenSansRegular, Arial, Helvetica, sans-serif;
}

.pagination a,
.pagination strong {
	padding: 5px 10px;
	line-height: 35px;
	border: 1px solid #e5e5e5;
	margin: 0 5px 0 0;
}

.pagination strong,
.pagination a:hover {
	color: #333;
	line-height: 35px;
	text-decoration: none;
	background-color: #f5f5f5;
}

.letters {
	margin: 0 0 20px 0;
}

.letters p {
	font: normal 11px OpenSansRegular, Arial, Helvetica, sans-serif;
}

.letters a {
	letter-spacing: 12px;
}

.letters a:hover {
	text-decoration: none;
	color: #000;
}

.letters .on {
	font-size: 42px;
	color: #333;
}

/* 10. Forms
-------------------------------------*/
.advance {
	margin: 0 0 40px 0;
}

.advance h3 {
	font: bold 18px OpenSansRegular, Arial, Helvetica, sans-serif;
	padding: 10px 0;
	width: 750px;
}

.advance label {
	width: 350px;
	display: inline-block;
}

.advance input[type=text],
.advance select {
	border: 1px solid #e5e5e5;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	font: normal 14px OpenSansRegular, Arial, Helvetica, sans-serif;
	padding: 5px;
	width: 330px;
	margin: 7px 0;
}

.advance input[type=text] {
	margin-right: 10px;
}

.advance hr {
	margin: 20px 0;
	width: 750px;
}

.advance .button {
	margin: 0 0 0 350px;
	border: 1px solid #ccc;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	background: url(/images/img_sprite.png) 0px -189px repeat-x;
	cursor: pointer;
	font: normal 16px OpenSansRegular, Arial, Helvetica, sans-serif;
	padding: 4px 10px;
}

.advance .button:hover {
	background: url(/images/img_sprite.png) 0px -224px repeat-x;
	text-shadow: 1px 1px #fff;
}

/* 11. Modules
-------------------------------------*/
.start {
	min-height: 400px;
	text-align: center;
	margin: auto;
}

.start .logo {
	background: url(/images/img_sprite.png) top left no-repeat;
	display: block;
	height: 108px;
	width: 338px;
	text-align: left;
	text-indent: -5000px;
	margin: 70px auto 0 auto;
}

.start p {
	padding: 20px 0 0 0;
}

.telusur {
	width: 620px;
	margin: 40px auto;
}

.telusur input[type=text] {
	border: 1px solid #ccc;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	font: normal 16px OpenSansRegular, Arial, Helvetica, sans-serif;
	padding: 0 10px;
	height: 33px;
	width: 515px;
	margin: 0px;
}

.telusur .submit {
	border: 1px solid #ccc;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	background: url(/images/img_sprite.png) 0px -189px repeat-x;
	cursor: pointer;
	font: normal 16px OpenSansRegular, Arial, Helvetica, sans-serif;
	height: 35px;
	width: 80px;
	margin: 0px 0 0 -5px;
	vertical-align: top;
}

.telusur .submit:hover {
	background: url(/images/img_sprite.png) 0px -224px repeat-x;
	text-shadow: 1px 1px #fff;
}

.telusur p {
	text-align: right;
	font: normal 11px OpenSansRegular, Arial, Helvetica, sans-serif;
	padding: 10px 0 0 0;
}

.telusur p a {
	padding: 0 0 0 10px;
}

.result {
	margin: 0 0 40px 0;
}

.result p {
	padding: 0 0 20px 0;
	text-indent: -20px;
	margin: 0 0 0 20px;
}

.result dl{
	width: 760px;
}

.result dl dt h3 a{
	color: #333333;
}

/* accordion */
#accordion h3 {
	font-size: 16px;
	line-height: 30px;
	padding-left: 30px;
}

#accordion div div {
	padding: 20px 0;
}

.ui-state-default {
	background: url(/images/arrow.png) no-repeat top left;
}

.ui-state-active {
	background: url(/images/arrow.png) no-repeat bottom left;
}